<template>
	<view class="common">

		<uni-nav-bar :fixed="true" color="#fff" background-color="rgba(255,255,255,0)" :border="false" left-icon="left"
			status-bar title="车辆维修" @clickLeft="back" />
		<view class="main">

			<view class="mapView">
				<map class="map" :latitude="39.909" :longitude="116.39742">
				</map>

			</view>

		</view>
		<view class="footer">
			<view class="info">

				<uni-list :border="false" class="shopList">


					<uni-list-item direction="column" :border="false" v-for="(shop,index) in shopList" :key="index">

						<!-- 自定义 header -->
						<template #header>
							<navigator url="/pacakgeRepair/pages/packageRepairDetail/packageRepairDetail">
								<view class="list-item-header">
									<text>{{shop.name}}</text>
									<text class="distance">500m</text>
								</view>
								<view class="star" style="display: flex;">
									<uni-rate :readonly="true" :value="2" size="18" />
									<text>{{shop.valuation}}分</text>
									<text>销量:</text>
									<text>{{shop.sale}}</text>
								</view>
							</navigator>


						</template>
						<!-- 自定义 body，实现左图右文布局 -->
						<template #body>
							<view class="list-item-container">
								<view class="left">
									<view class="des">
										营业时间: <text>周一到周五</text>
										：
									</view>
									<view class="des">
										位置: <text>山航去 人民路</text>
										：
									</view>

								</view>
								<!-- 左图片 -->

								<!-- 右文字 -->
								<view class="right">
									<image src="@/pacakgeRepair/static/shop.png" mode=""
										style="width: 220rpx; height: 140rpx;"></image>
								</view>
							</view>
						</template>
						<!-- 自定义 footer -->
						<template #footer>

						</template>
					</uni-list-item>


				</uni-list>

			</view>
			<view class="concat">

				<view @click="open">
					联系门店

				</view>

				<!-- #ifndef MP -->
				<view>
					<navigator url="/pacakgeRepair/pages/packageRepairBook/packageRepairBook">
						立即预定
					</navigator>

				</view>
				<!-- #endif -->

				<!-- #ifdef MP -->
				<view @click="goBook">
					立即绑定
				</view>

				<!-- #endif -->

				<uni-popup ref="choose" type="share" safeArea backgroundColor="#fff">
					<view class="choose">
						<view>
							155166455255
						</view>
						<view>
							复制
						</view>
						<view @click="close">
							取消拨号
						</view>

					</view>

				</uni-popup>

			</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopList: [{
					name: "百世汽车",
					valuation: 5,
					sale: 200,
					url: "@/pacakgeRepair/static/shop.png",

					des1: "周一到周五",
					des2: "周一到周五",
					des3: "周一到周五",
				}]

			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.choose.open()
			},
			close() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.choose.close()
			},

			// #ifdef MP
			goBook() {

				uni.navigateTo({
					url: "/pacakgeRepair/pages/packageRepairBook/packageRepairBook"
				})
			}
			// #endif

		}
	}
</script>

<style scoped>
	.mapView {
		background-color: #fff;
		padding-top: 20rpx !important;
		padding-bottom: 20rpx !important;
	}

	.map {
		width: 650rpx;
		/* height: 1000rpx; */
		height: 56vh;
	}

	.footer {
		padding: 0rpx;
		
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		width: 100%;

	}

	.shopList {
		row-gap: 20rpx;
		background-color: transparent;
	}


	::v-deep .uni-list-item {
		border-bottom: none;
		/* 去除底部边框 */
	}

	.list-item-header {
		font-size: 30rpx;
		font-weight: 900;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.list-item-header>.distance {
		color: #77b0fe;
	}

	.list-item-container {
		padding: 10rpx 0rpx;
		display: flex;
		column-gap: 20rpx;
		justify-content: space-between;
	}

	.list-item-container>.right>.des {
		height: 60rpx;
		line-height: 60rpx;
	}


	.list-item-container>.left {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: start;
	}

	.list-item-container>.left>.des {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;


	}

	.concat {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 30rpx;
		background-color: #fff;


	}

	.concat>view {
		padding: 15rpx 70rpx;
		line-height: 40rpx;
		height: 40rpx;
		background-color: #3789ff;
		border-radius: 30rpx;
		color: #fff;

		background: linear-gradient(to right, #3789ff, #0662e6);
	}

	.concat>view:nth-child(2) {

		background: linear-gradient(to right, #ff7438, #ff4000);
	}

	/* name选择器 */
	::v-deep [name="content"],
	::v-deep .uni-popup__wrapper {
		background-color: transparent !important;
	}

	.choose {
		background-color: #fff;
		color: #000000;
		text-align: center;
		font-size: 30rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0rpx 0rpx;

	}

	.choose>view {
		line-height: 80rpx;
		height: 80rpx;
		/* border: 2rpx solid #eee; */
		border-bottom: 5rpx solid #eee;
	}
</style>